<template>
	<ul class="list">
		<li class="item"
		 v-for="item of letters"
		  :key = "item"
		  @click="handleLetterClick"
		  @touchstart="handleTouchStart"
		  @touchmove="handleTouchMove"
		  @touchend="handleTouchEnd"
		  :ref = "item"
		  >{{item}}</li>	
	</ul>
</template>
<script>
	export default {
		props:{
			cities:Object
		},
		name: "CityAlphabet",
		data:function(){
			return{
				touchstatus:false,
				startY:0,
				timer:null
			}
		},
		updated:function(){//只计算一次A的高度 而且是在数据更新的时候计算
			this.startY = this.$refs['A'][0].offsetTop
		},
		computed:{
			letters:function(){
				var letters = [];
				for(var i in this.cities){
					letters.push(i)
				}
				return letters
			}
		},
		methods:{
			handleLetterClick:function(e){
				var el = e.target.innerText
				this.$emit('change',el)
			},
			handleTouchStart:function(){
				this.touchstatus = true
			},
			handleTouchMove:function(ev){
				if(this.touchstatus){
					if(this.timer){
						clearTimeout(this.timer)
					}
					this.timer = setTimeout(function(){
						var touch = ev.touches[0]
						var touchY = touch.clientY - 79			
						var index = Math.floor((touchY - this.startY)/20); 
						if(index >= 0 && index < this.letters.length){
							this.$emit('change',this.letters[index])
						}
					}.bind(this),16)
					
				}
			},
			handleTouchEnd:function(){
				
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	.list{
		display: flex;
		flex-direction:column ;
		justify-content: center;
		position: absolute;
		top: 1.58rem;
		right: 0;		
		bottom: 0rem;
		width: .4rem;
		
	}
	.item {
		text-align: center;
		line-height: .4rem;
		color: $bgColor;
	}
	.header-back {
		position: absolute;
		width: .64rem;
		text-align: center;
		font-size: .4rem;
		top: 0px;
		left: 0px;
		color: #fff;
	}
</style>